<template>
<div id="charts4" style="height: 400px;" ref="charts4"></div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
        var labelRight = {
                        normal: {
                            position: 'right'
                        }
                    };

                    var option = {
                        title: {
                            text: '',
                            subtext: '',
                            sublink: ''
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            top: 80,
                            bottom: 30
                        },
                        xAxis: {
                            type : 'value',
                            position: 'top',
                            splitLine: {lineStyle:{
                                type:'dashed',
                                    color:'black'
                            }}
                        },
                        yAxis: {
                            type : 'category',
                            axisLine: {show: false},
                            axisLabel: {show: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            data : ['Oncology letters', 'Blood', '中华血液学杂志', '中国感染控制杂志', 'Stem cell research', '中华护理杂志', 'biophysica Sinica', '循证医学', 'Acta biochimica et', '学会会议论文精选']
                        },
                        series : [
                            {
                                name:'发表数',
                                type:'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}',
                                        color:'#fff'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        show: true,
                                        color:'#6eba8c'
                                    }
                                },
                                data:[
                                    {value: -0.07, label: labelRight},
                                    {value: -0.09, label: labelRight},
                                    0.2, 0.44,
                                    {value: -0.23, label: labelRight},
                                    0.08,
                                    {value: -0.17, label: labelRight},
                                    0.47,
                                    {value: -0.36, label: labelRight},
                                    0.18
                                ]
                            }
                        ]
                    };

        var mycharts = this.$echarts.init(this.$refs.charts4)
        mycharts.setOption(option)
      }
    }
  }
</script>
<style></style>
